<template>
  <div class="app-container home" v-loading="isLoading">
    <div>
      <el-row :gutter="10">
        <el-col :span="8">
          <div class="card-item">
            <img width="70" src="/dash-o.d8905405.png" />
            <div style="flex-grow: 1;padding: 5px 20px">
              <h5 class="card-item-title">账户可用余额（元）</h5>
              <h3 class="card-item-money" style="text-align: center">
                ￥{{data?.availableFee?data?.availableFee:'0.00'}}
                <el-icon><View /></el-icon>
              </h3>
              <div class="card-item-btns">
                <el-button plain @click="handlePanelClick(5)" color="red">余额查询</el-button>
                <el-button plain @click="handlePanelClick(5)" color="#28ca41">余额提现</el-button>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="card-item">
            <img width="70" src="/dash-f.e556a4a6.png" />
            <div style="flex-grow: 1;padding: 5px 20px">
              <h5 class="card-item-title">本月代发总额（元）</h5>
              <h3 class="card-item-money" style="text-align: center">￥{{data?.monthTransactionAmount?data?.monthTransactionAmount:'0.00'}}</h3>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="card-item">
            <img width="70" src="/dash-r.a51d3f60.png" />
            <div style="flex-grow: 1;padding: 5px 20px">
              <h5 class="card-item-title">本月代发笔数（笔）</h5>
              <h3 class="card-item-money" style="text-align: center">{{data?.monthTransactionNumber?data?.monthTransactionNumber:0}}</h3>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="function-panel">
      <el-row :gutter="10">
        <el-col :span="12">
          <FunctionCard
            @onBtnClick="handlePanelClick(1)"
            btnText="任务承接转包"
            btnColor="#28ca41"
            :dec="'您有（'+(data?.waitTask ? data?.waitTask :0)+'）个转包任务待处理，请尽快处理'"
            icon=""
          />
        </el-col>
        <el-col :span="12">
          <FunctionCard
            @onBtnClick="handlePanelClick(2)"
            btnText="代发申请订单"
            btnColor="#1890ff"
            :dec="'您有（'+(data?.waitBill ? data?.waitBill :0)+'）个订单还未处理，请尽快处理'"
            icon=""
          />
        </el-col>
        <el-col :span="12">
          <FunctionCard
            @onBtnClick="handlePanelClick(3)"
            btnText="发票申请订单"
            btnColor="#ffbd2e"
            :dec="'您有（'+(data?.waitInvoice ? data?.waitInvoice:0)+'）个订单还未处理，请尽快处理'"
            icon=""
          />
        </el-col>
        <el-col :span="12">
          <FunctionCard
            @onBtnClick="handlePanelClick(4)"
            btnText="上传完税证明"
            btnColor="red"
            :dec="'您有（'+(data?.waitTax ? data?.waitTax :0)+'）个完税证明未上传，请尽快处理'"
            icon=""
          />
        </el-col>
      </el-row>
    </div>

    <HomeFooter />
  </div>
</template>

<script setup name="Index" lang="ts">
// import { initWebSocket } from '@/utils/websocket';
import FunctionCard from '@/layout/components/HomeFunctionPanelCard/index.vue';
import HomeFooter from './common/Footer.vue'
import { useHomePageInfo } from './common/useHomePageInfo'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { data, isLoading } = useHomePageInfo({})

onMounted(() => {
  // let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
  // initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
});

const handlePanelClick = (type:any) => {
  console.log('handlePanelClick');
  switch(type){
    case 1:
      proxy?.$tab.openPage('project/proAccept');
      break;
    case 2:
      proxy?.$tab.openPage('settle/billSerCheck');
      break;
    case 3:
      proxy?.$tab.openPage('invoice/record');
      break;
    case 4:
      proxy?.$tab.openPage('sw/prove');
      break;
    case 5:
      proxy?.$tab.openPage('peoples/balance');
      break;

  }

}


onMounted(async () => {
});
</script>

<style scoped lang="scss">
.app-container {
  overflow-x: hidden;
  background-color: #f0f2f5;
  height: calc(100vh - 99px);
  overflow-y: auto;
  padding: 10px;
  .common-question {
    border-bottom: 1px dashed #ccc;
    display: flex;
    justify-content: space-between;
    .date {
      color: #898989;
      font-size: 12px;
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
  }
  .card-item {
    display: flex;
    background: #fff;
    border-radius: 5px;
    height: 154px;
    min-width: 300px;
    .card-item-title {
      font-size: 13px;
      font-weight: 700;
    }
    .card-item-money {
        font-weight: 700;
        color: #333;
        font-size: 20px
      }

    .card-item-btns {
      display: flex;
      justify-content: center
    }
  }
}
</style>
